<template>
    <div class="get_coupon">

        <!--S搜索-->
        <form id="search" ref="search" method="post" action="" @submit.prevent="submitSearch">
            <i class="search-icon cubeic-search"></i>
            <cube-input class="search-input" type="search" v-model.trim="search_keyword" placeholder="搜索门店类型，如：男装、女装、美食"></cube-input>
            <i class="close-icon cubeic-close" v-show="search_status" @click="closeSearch"></i>
        </form>
        <!--E搜索-->

        <!--S主体-->
        <cube-scroll id="scroll" ref="scroll" :style="{height:page_height+'px'}" :options="scroll_options" @pulling-up="upGetList">

            <!--S门店卡券列表-->
            <div id="ul">
                <template v-if="list.list.length > 0">
                <!--S循环体-->
<!--                <div class="li">-->
<!--                    &lt;!&ndash;S门店信息&ndash;&gt;-->
<!--                    <div class="store">-->
<!--                        <img src="https://www.baidu.com/img/bd_logo1.png" class="logo" />-->
<!--                        <p class="store_name">门店名称门店名称门店名称门店名称门店名称门店名称门店名称</p>-->
<!--                    </div>-->
<!--                    &lt;!&ndash;E门店信息&ndash;&gt;-->
<!--                    &lt;!&ndash;S卡券列表&ndash;&gt;-->
<!--                    <cube-scroll direction="horizontal" class="coupon-list" ref="scrollCoupon">-->
<!--                        <ul>-->
<!--                            <li>-->
<!--                                <div class="type">折扣券</div>-->
<!--                                <img class="cover" src="https://w7dev.geekdm.com/images/2/2019/12/Rs0ZEpm0810jlG5PWlLM8sn03MSzDP.jpg" />-->
<!--                                <p class="cost">满1000减100</p>-->
<!--                                <p class="name">卡券名字卡券名卡券名字卡券名字卡券名字卡券</p>-->
<!--                                <div class="inventory">库存:1000/1000</div>-->
<!--                                <div class="time">有效期至:2019-10-10</div>-->
<!--                            </li>-->
<!--                            <li>-->
<!--                                <div class="type">折扣券</div>-->
<!--                                <img class="cover" src="https://w7dev.geekdm.com/images/2/2019/12/Rs0ZEpm0810jlG5PWlLM8sn03MSzDP.jpg" />-->
<!--                                <p class="cost">满1000减100</p>-->
<!--                                <p class="name">卡券名字卡券名卡券名字卡券名字卡券名字卡券</p>-->
<!--                                <div class="inventory">库存:1000/1000</div>-->
<!--                                <div class="time">有效期至:2019-10-10</div>-->
<!--                                <div class="status">-->
<!--                                    <i class="status-icon already-received iconfont icon-yilingqusvg"></i>-->
<!--                                </div>-->
<!--                            </li>-->
<!--                            <li>-->
<!--                                <div class="type">折扣券</div>-->
<!--                                <img class="cover" src="https://w7dev.geekdm.com/images/2/2019/12/Rs0ZEpm0810jlG5PWlLM8sn03MSzDP.jpg" />-->
<!--                                <p class="cost">满1000减100</p>-->
<!--                                <p class="name">卡券名字卡券名卡券名字卡券名字卡券名字卡券</p>-->
<!--                                <div class="inventory">库存:1000/1000</div>-->
<!--                                <div class="time">有效期至:2019-10-10</div>-->
<!--                                <div class="status empty">-->
<!--                                    <i class="status-icon empty iconfont icon-yiqiangwan"></i>-->
<!--                                </div>-->
<!--                            </li>-->
<!--                        </ul>-->
<!--                    </cube-scroll>-->
<!--                    &lt;!&ndash;E卡券列表&ndash;&gt;-->
<!--                </div>-->
<!--                    -->
                <div class="li" v-for="item in list.list" v-bind:key="item.store_id">
                    <!--S门店信息-->
                    <div class="store">
                        <img :src="item.logo" class="logo" />
                        <p class="store_name">{{item.store_name}}</p>
                    </div>
                    <!--E门店信息-->
                    <!--S卡券列表-->
                    <cube-scroll direction="horizontal" :data="item.coupons" class="coupon-list" ref="scrollCoupon" :options="{click:false}">
                        <ul>
                            <li :class="itema.coupon_type" v-for="itema in item.coupons" @click="clickCoupon(itema,item.store_id)" v-bind:key="itema.treasure_id">
                                <div class="type">{{itema.type.substring(0,2)}}</div>
                                <img v-if="itema.cover" class="cover" :src="itema.cover" />
                                <p class="cost">{{itema.cost}}</p>
                                <p class="name">{{itema.name}}</p>
                                <div class="inventory">库存:{{itema.give_number}}/{{itema.number}}</div>
                                <div class="time">{{itema.time}}</div>
                                <div class="status" v-if="!received(itema)">
                                    <i class="status-icon already-received iconfont icon-yilingqusvg"></i>
                                </div>
                                <div class="status empty" v-else-if="received(itema) && !itema.expire && itema.give_number >= itema.number">
                                    <i class="status-icon empty iconfont icon-yiqiangwan"></i>
                                </div>
                                <div class="status expire" v-else-if="received(itema) && itema.give_number < itema.number && itema.expire">
                                    <i class="status-icon empty iconfont icon-yiguoqi"></i>
                                </div>
                            </li>
                        </ul>
                    </cube-scroll>
                    <!--E卡券列表-->
                </div>
                <!--E循环体-->
                </template>
                <template v-else>
                    <empty>暂无可领卡券</empty>
                </template>
            </div>
            <!--E门店卡券列表-->

        </cube-scroll>
        <!--E主体-->

    </div>
</template>

<script>
    import store from "../../store.js";
    import empty from "../../components/empty/Empty.vue";
    export default {
        name: "get_coupon",
        data(){
            return {
                page_height:document.documentElement.clientHeight,  //页面高度
                store_id:0,
                activity_id:0,  //活动id
                search_status:0,  //搜索状态
                search_keyword:"", //搜索关键词
                get_coupon_bourn:0,//是否强制用户到活动区域
                //滚动参数
                scroll_options:{
                    click:false,
                    scrollbar:true,
                    pullUpLoad: {
                        txt: {
                            more: "上拉加载更多",
                            noMore: "----我也是有底线的----"
                        }
                    }
                },
                //S列表
                list:{
                    list:[],
                    limit:[0,8]
                }
                //E列表
            };
        },
        components:{
          empty
        },
        created(){
            this.activity_id = this.$route.params.activity_id;
            this.getCouponLimit();
            this.getList();
        },
        mounted(){
            setTimeout(()=>{
                this.page_height = document.documentElement.clientHeight - this.$refs.search.getBoundingClientRect().height;
            },100);
        },
        methods:{
            //获取领券配置，是不是限制用户必须到达活动区域才可以领取卡券
            getCouponLimit(){
                this.$http.post(this.$sysinfo.url,this.$qs.stringify({
                    pages:"activity",
                    doing:"easyFind",
                    activity_id:this.activity_id,
                    return:["get_coupon_bourn"]
                }))
                    .then((res)=>{
                        if(res.data.status == "success"){
                            this.get_coupon_bourn = parseInt(res.data.data.get_coupon_bourn);
                        }else{
                            this.get_coupon_bourn = 1;
                        }
                    })
                    .catch();
            },
            //提交搜索
            submitSearch(){
                if(this.search_keyword == ""){
                    this.$createToast({
                        time:1000,
                        txt:"请输入搜索内容",
                        type:"warn",
                        mask:true
                    }).show();
                    return;
                }
                this.$refs.scroll.scrollTo(0,0);
                this.search_status = 1;
                this.list.limit = [0,8];
                this.list.list = [];
                this.getList();
            },
            //关闭搜索
            closeSearch(){
                this.$refs.scroll.scrollTo(0,0);
                this.search_status = 0;
                this.search_keyword = "";
                this.list.list = [];
                this.list.limit = [0,8];
                this.getList();
            },
            //卡券是否可领取
            received(item){
                if(item.user_number > 0){
                    if(item.received_number >= item.user_number){
                        return false;
                    }
                }
                return true;
            },
            //获取列表
            getList(){
                this.$http.post(this.$sysinfo.url,this.$qs.stringify({
                    pages:"ActivityA",
                    doing:"activityGetCoupon",
                    limit:this.list.limit,
                    activity_id:this.activity_id,
                    uid:this.$sysinfo.uid,
                    search_status:this.search_status ? 1 : 0,
                    search_keyword:this.search_keyword
                }))
                    .then((res)=>{
                        if(res.data.status == "success"){
                            this.list.list.push(...res.data.data);
                            this.$refs.scroll.forceUpdate(true,true);
                            this.list.limit[0] += this.list.limit[1];
                        }else{
                            this.$refs.scroll.forceUpdate(false,false);
                        }
                        this.$nextTick(()=>{
                            if(this.$refs.scroll.$el.querySelector(".cube-scroll-list-wrapper").getBoundingClientRect().height-1 <= Math.ceil(this.page_height)){
                                this.scroll_options.pullUpLoad = false;
                            }
                            this.$refs.scroll.refresh();
                        });
                    })
                    .catch();
            },
            //上拉加载
            upGetList(){
                this.getList();
            },
            //点击卡券
            clickCoupon(item,store_id){
                this.store_id = store_id;
                //判断用户领卡数量和库存和卡券是否过期
                if(!this.received(item) || item.give_number >= item.number || item.expire){
                    return;
                }
                this.$createDialog({
                    type:"confirm",
                    icon:"cubeic-question",
                    content:"确定领取该卡券吗？",
                    confirmBtn:{
                        text:"领取"
                    },
                    onConfirm:()=>{
                        //判断活动是否开始
                        if(store.state.activity.time_status != 2){
                            this.$createToast({
                                time: 2000,
                                txt: store.state.activity.time_status==1 ? "活动未开始" : "活动已结束",
                                type: "error",
                                mask: true
                            }).show();
                            return false;
                        }
                        //领取卡券,用户是否在活动区域内判断
                        if(this.get_coupon_bourn == 1){
                            this.location()
                                .then((position) => {
                                    var is_coords = false; //是否在活动区域范围内容
                                    //判断用户是否在某个活动区域范围内
                                    for (let i = 0; i < store.state.activity.map_coords.length; i++) {
                                        var coords = store.state.activity.map_coords[i].coords;
                                        if (this.$map.GeometryUtil.isPointInRing(position, coords)) {
                                            is_coords = true;
                                            break;
                                        }
                                    }
                                    if (!is_coords) {
                                        this.$createToast({
                                            time: 2000,
                                            txt: "领券失败，不在活动区域范围内",
                                            type: "error",
                                            mask: true
                                        }).show();
                                        return false;
                                    }
                                    this.getCoupon(item);
                                })
                                .catch();
                        }else{
                            this.getCoupon(item);
                        }
                    }
                }).show();
            },
            //确定领取卡券
            getCoupon(item){
                this.$http.post(this.$sysinfo.url,this.$qs.stringify({
                    pages:"activityA",
                    doing:"getCoupon",
                    treasure_id:item.treasure_id,
                    activity_id:this.activity_id,
                    uid:this.$sysinfo.uid,
                    store_id:this.store_id
                }))
                    .then((res)=>{
                        if(res.data.status == "success"){
                            item.received_number = res.data.data.received_number;
                            item.give_number = res.data.data.give_number;
                            this.$createToast({
                                time:1000,
                                txt:"领券成功",
                                type:"correct"
                            }).show();
                        }else{
                            this.$createToast({
                                time:1000,
                                txt:res.data.err_msg,
                                type:"error"
                            }).show();
                        }
                    })
                    .catch();
            },
            //定位，如果是开发环境使用高德定位，生产使用微信环境
            location(){
                if(this.$sysinfo.develop){
                    return new Promise((success,error)=>{
                        store.state.location.getCurrentPosition((status,result)=>{
                            if(status == "complete"){
                                success(result.position);
                            }else{
                                error("定位失败");
                            }
                        });
                    });
                }else{
                    return new Promise((success,error)=>{
                        this.$wx.getLocation({
                            type: "gcj02",
                            success:(res)=>{
                                success([res.longitude,res.latitude]);
                            },
                            cancel:function(){
                                error("定位失败");
                            }
                        });
                    });
                }
            }
        }
    };
</script>

<style scoped>
    .get_coupon{
        height:100%;
        font-size:16px;
    }
    #search{
        position: fixed;
        z-index:10;
        top:0;
        left:0;
        width:375px;
        height:50px;
        padding-top: 5px;
        box-sizing: border-box;
        border-bottom:1px solid #eee;
    }
    #search .search-icon{
        position: absolute;
        z-index: 10;
        left:20px;
        top:14px;
        color:#ccc;
        font-size:20px;
    }
    #search .close-icon{
        position: absolute;
        z-index:10;
        right:20px;
        top:12px;
        font-size:25px;
        color:#ccc;
    }
    #search .search-input{
        width:355px;
        margin:0 auto;
    }
    #scroll{
        position: absolute;
        width:375px;
        top:50px;
    }
    #ul{
        box-sizing: border-box;
    }
    #ul .li{
        height:190px;
    }
    #ul .li .store{
        height:60px;
        padding:5px 10px 0 10px;
        box-sizing: border-box;
        color:#000;
        border-bottom: 1px solid #eee;
        margin-bottom: 5px;
    }
    #ul .li .store .logo{
        width:50px;
        height:50px;
        border-radius: 25px;
        float:left;
        border:1px solid #eee;
    }
    #ul .li .store p.store_name{
        width:300px;
        float:right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 50px;
    }
    #ul .li .coupon-list{
        height:117px;
    }
    #ul .li .coupon-list ul{
        white-space: nowrap;
        padding:0 10px;
    }
    #ul .li .coupon-list li{
        position:relative;
        width:300px;
        height:117px;
        margin-right: 10px;
        overflow: hidden;
        display: inline-block;
        padding:10px;
        box-sizing: border-box;
        color:#fff;
        font-size:14px;
    }
    #ul .li .coupon-list li.dh{
        background: url('../images/dh-bg.png') no-repeat;
        background-size: 100% 100%;
    }
    #ul .li .coupon-list li.dj{
        background: url('../images/dj-bg.png') no-repeat;
        background-size: 100% 100%;
    }
    #ul .li .coupon-list li.mj{
        background: url('../images/mj-bg.png') no-repeat;
        background-size: 100% 100%;
    }
    #ul .li .coupon-list li.rc{
        background: url('../images/rc-bg.png') no-repeat;
        background-size: 100% 100%;
    }
    #ul .li .coupon-list li.zk{
        background: url('../images/zk-bg.png') no-repeat;
        background-size: 100% 100%;
    }
    #ul .li .coupon-list li:nth-last-child(1){
        margin-right: 0;
    }
    #ul .li .coupon-list li img.cover{
        float: left;
        width:60px;
        height:60px;
        border:3px solid #fff;
        box-sizing: border-box;
        margin-right: 5px;
        object-fit: cover;
    }
    #ul .li .coupon-list li .type{
        position: absolute;
        right:10px;
        top:5px;
        text-shadow: 0 0 1px, 0 0 3px;
        color:#fff;
        font-size:18px;
    }
    #ul .li .coupon-list li .cost{
        float: left;
        font-size:16px;
        margin-bottom: 5px;
        width: 155px;
    }
    #ul .li .coupon-list li .name{
        float: left;
        white-space: normal;
        width: 210px;
    }
    #ul .li .coupon-list li .inventory,#ul .li .coupon-list li .time{
        position: absolute;
        bottom:35px;
        right:15px;
        font-size:14px;
    }
    #ul .li .coupon-list li .time{
        left:10px;
        bottom:10px;
    }
    #ul .li .coupon-list li .status{
        position: absolute;
        top:-7px;
        right:5px;
        transform: rotate(35deg);
        opacity: 0.8;
    }
    #ul .li .coupon-list li .status.empty{
        transform: rotate(75deg);
    }
    #ul .li .coupon-list li .status.expire{
        transform: rotate(75deg);
    }
    #ul .li .coupon-list li .status-icon{
        font-size:60px;
        color:red;
    }
    #ul .li .coupon-list li .empty,#ul .li .coupon-list li .expire{
        color: black;
    }
</style>

<style lang="stylus" rel="stylesheet/stylus">
    #search .cube-input::after
        border-radius:40px;
    #search .cube-input
        padding-left:30px;
        box-sizing border-box;
    #ul .cube-scroll-content
        display: inline-block;
</style>
